<template>
  <el-calendar v-model="value">
    <template #dateCell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
      </p>
      <div class="showSchedule">
        {{ showSchedule(data.day) }}
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      value: '',
      scheduleList: {
        '2021-11-12': '中美高层会议',
        '2021-11-07': '公司会议',
        '2021-11-24': '商业会议'
      }

    }
  },
  methods: {
    showSchedule(date) {
      if (this.scheduleList.hasOwnProperty(date)) {
        return this.scheduleList[date]
      }
    }
  }
}
</script>

<style scoped>
.showSchedule {
  color: #20a0ff;
}

</style>
